<template>
  <div class="list-container">
    <div v-if="this.workflowApplyId" class="table-panel">
      <div class="details-steps">
        <el-steps :active="getCurrentActive(workForm.workflowNodeList,workForm.currentWorkflowNode)" :process-status="processStatus" :finish-status="finishStatus">
        <el-step
          v-for="workflowNode in workForm.workflowNodeList"
          :key="workflowNode.applyNodeId"
        >
        <template slot="title">
            <div class="steps-title">{{workflowNode.workflowNodeName}}</div>
          </template>
          <template slot="description">
            <p v-if="workflowNode.examineUserName != null"><span>审批人:</span> {{ workflowNode.examineUserName }}</p>
            <p v-if="workflowNode.examineReason != null"><span>审批反馈:</span>{{ workflowNode.examineReason }}</p>
            <p v-if="workflowNode.examineUserName == null"><span>节点审批人:</span>{{ workflowNode.workflowNodeUserList.map(ele =>ele.examineUserName).join() }}</p>
          </template>
        </el-step>
      </el-steps>
      </div>
    </div>
    <div v-else>
<!--      <h2>该流程还未提交，暂无节点信息</h2>-->
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          type="index"
          label="序号"
          width="60"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="personName" label="考勤人姓名" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {getTree} from "@/api/worker";
import {laborDistList,fineAndBonus} from '@/api/wage';
import belong from "@/api/belong";
import workflowApi from '@/api/workflow/workFlow'
export default {
  data() {
    return {
      //页面
      companyId:localStorage.getItem("companyId"),
      totalData: 0,
      //table
      searchForm: {
        currentPage: 1,
        date:this.$route.query.date,
        endDate:null,
        pageSize: 10,
        serviceCorporationId: null,
        startDate: null,
        teamId: null,
      },
      tableData:[],
      //流程
      workForm: {
        type: '',
        applyNodeId: '',
        examineReason: '',
        workflowNodeList: [],
        currentWorkflowNode: {}
      },
      finishStatus: 'success',
      processStatus:'process',
      stepIndex:2,
      workflowApplyId:null
    };
  },
  async created(){
    console.log(this.$route.query.date)
    console.log(this.$route.query.workflowApplyId)
    console.log(this.$route.query.personIds)
    this.selectPersonNamesByPersonIds(this.$route.query.personIds)
    this.searchForm.date=this.$route.query.date
    var workflowApplyId = this.$route.query.workflowApplyId
    if(workflowApplyId){
      this.workflowApplyId=workflowApplyId
      this.getTableListExamineWorkflowApply()
    }
  },
  methods: {
    selectPersonNamesByPersonIds(personIds){
      belong.selectPersonNamesByPersonIds(personIds).then(res=>{
        var that = this
        res.data.personNames.forEach(function (item){
          that.tableData.push({
            personName : item
          })
        })
      })
    },
    getTableListExamineWorkflowApply() {
      console.log('workflowApplyId',this.workflowApplyId);
      workflowApi.getWorkflowApplyInfo(({applyId:this.workflowApplyId})).then(res => {
        console.log(res)
        this.workForm = res.data
        console.log(this.workForm)
      })
    },
    getCurrentActive(workflowNodeList, currentWorkflowNode) {
      let active = 0
      let processStatus = 'success'
      let that = this
      workflowNodeList.forEach(function (element, index){
        if (currentWorkflowNode !== null) {
          if (element.applyNodeId === currentWorkflowNode.applyNodeId) {
            active = index
            that.workForm.applyNodeId = element.applyNodeId
            processStatus = 'process'
          }
        } else {
          if (element.workflowNodeStatus === '3') {
            active = index
            processStatus = 'error'
          } else if (element.workflowNodeStatus === '2') {
            active = index
            processStatus = 'success'
          }
        }
      })
      this.processStatus = processStatus
      return active
    },
    convertStatus(status){
      let newStatus = "未知"
      switch (status){
        case '1': newStatus = "待审核";break;
        case '2': newStatus = "审核中";break;
        case '3': newStatus = "已审核";break;
        case '4': newStatus = "已驳回";break;
        case '5': newStatus = "已撤回";break;
      }
      return newStatus
    }
  },
};
</script>

<style lang="scss" scoped>
.record-steps {
  min-height: 100px;
  background-color: #ffffff;
  padding: 50px 0;
  border-bottom: solid 1px #e4e4e4;
  .el-steps {
    width: 80%;
    margin: 0 auto;
  }
  .el-step__line {
    margin-left: 145px;
  }
  .is-success {
    border-color: #1abc9c;
    color: #1abc9c;
  }
  .el-step__description{
    font-size: 13px;
  }
  .el-step__main {
    margin-left: 30px;
    margin-top: -30px;
    .el-step__title {
      font-weight: bold;
    }
  }
}
</style>
